<template>
    <div @click="$selectItem" class="flex align-center c_white plr55 b-block" :class="[active && $style.active,$style.slideItem]">
        <v-icon  :name="settings.leftIcon" :size=" settings.leftSize"></v-icon>
        <div class="c_white b_FS-32 ml30">
          {{ settings.content }}
        </div>
    </div>
</template>

<script type="text/babel">
    export default {
        name: "slideBarItem",
        props: {
          settings : {
            type: Object ,
            default(){
              return {
                leftIcon : 'all' ,
                leftSize : '60' ,
                content : '' ,
                type : '' ,
                link : ''
              }
            }
          },
          active: {
            type: Boolean,
            default:false
          } ,
        },
        components: {},
        data() {
            return {}
        },
        created() {
        },
        mounted() {
        },
        beforeDestroy() {
        },
        computed: {},
        methods: {
          $selectItem(){
            this.$emit('handleItemClick', this.settings.type)
          }
        }
    }
</script>

<style module lang='scss'>
  .slideItem{
    height: 100px;
  }
  .active{
    background-color: #333;

  }

</style>
